<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>同城活动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
    <style>
        body{
            font-family: "Microsoft YaHei", sans-serif;
            min-height:100vh;
            background: #fff;
        }
        .header{
            background: #2a2c33;
        }
        .header h1{
            color:#fff;
            font-size:18px;
        }
        .header a{
            color:#fff;
        }
        ul li{
            list-style-type: none;
        }
        .section{
            margin-top:44px;
        }
        .section .sel_list{
            height:46px;
            line-height:46px;
            width:100%;
            text-align:center;
            margin:0;
            padding:0;
            /*border-bottom:1px solid #f2f2f2;*/
            font-size:15px;
        }
        .section .sel_list>li{
            float:left;
            width:calc(100%/3);
        }
        .sel_list a{
            display: inline-block;
            width: 100%;
        }
        .sel_list a b{
            display: inline-block;
            margin-left:9px;
            border-color: #333 #fff #fff #fff;
            border-style: solid;
            border-width: 7px 5px 0 5px;
            height: 0;
            width: 0;
        }
        .content ul{
            margin:0;
            padding:0;
        }
        .content>ul>li{
            height:110px;
            width:100%;
            overflow: hidden;
            padding:22px 12px 12px;
            border-bottom:1px solid #f2f2f2;
        }
        .content ul li .view {
            float: left;
            width: 30%;
            height: 100%;
            position:relative;
        }
        .content ul li .view .end p{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.5;
            border-radius: 3px;
            background: #000;
            width: 100%;
            height: 100%;
        }
        .content ul li .view>p{
            background: url("../../images/city_life/life_LY.png") no-repeat;
            position:absolute;
            width:100%;
            height:100%;
            z-index: 100;
            top: 0;
            left: 0;
            background-size: 30%;
        }
        .end{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
            z-index:120;
        }
        .content ul li .view a{
            color:#fff;
            opacity: 0.7;
            font-size:16px;
            display: inline-block;
            width:100%;
            position:absolute;
            top:30%;
            text-align: center;
            z-index: 10;
        }
        .content ul li .address{
            float:left;
            width:70%;
            height:100%;
            padding-left:3%;
        }
        .view img{
            width:100%;
            height:100%;
            border-radius: 3px;
            vertical-align: middle;
        }
        .address ul{
            height:100%;
        }
        .address ul li{
            font-size:13px;
            color:#999;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:1;
            overflow: hidden;
        }
        .address ul li:first-child{
            font-size:16px;
            padding-top:0;
            color:#333;
        }
        .address ul li:last-child{
            font-size:11px;
            text-align:right;
        }
        .active{
            border-bottom:1px solid #FC635C;
            color:#FC635C;
        }
        .noactive{
            border-bottom:1px solid #f2f2f2;
            color:#333;
        }
        /*活动类型*/
        .sel_list{
            position:relative;
            position:fixed;
        }
        #mold{
            position:absolute;
            top:47px;
            right:0;
            width:100%;
            min-height:100vh;
            z-index: 13000;
            background:rgba(0,0,0,.4);
            text-align: left;
        }
        #mold p{
            margin:0;
            background: #fff;
            padding:0 2%;
        }
        #mold span{
            width:calc(79%/4);
            margin:12px 2%;
            padding:0;
            background: #f2f2f2;
            color:#333;
            border-radius: 3px;
            height:37px;
            line-height:37px;
            display: inline-block;
            font-size:15px;
            text-align: center;
        }
        /*置顶活动*/
        .hot{
            display: inline-block;
            width:21px;
            height:21px;
            background: url("../../images/city_life/hot.png") no-repeat 0px 1px;
            background-size: 75%;
            vertical-align: middle;
        }
        /*类型*/
        .hide{
            display: none;
        }
        .visible{
            display: block;
        }
        /*小三角*/
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">同城活动</h1>
</header>
<div class="section">
    <ul class="sel_list">
        <li><a target="0" class="active" id='newest'>最新</a></li>
        <li><a  target="1" class="noactive" id='hottest'>最热</a></li>
        <li>
            <a target="2" id='tag' class="noactive">类型<b></b></a>
        </li>
    </ul>
    <div class="content">
        <ul>

        </ul>
    </div>
</div>
<div>

</div>
<script src="../../plugins/mui/mui.min.js"></script>
<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../js/getApiToken.js"></script>
<!--<script src='../../js/judge.js'></script>-->
<script src="../../js/md5.js"></script>
<script>
    var mainWebview;
    var barItemWebviewArray=[];
    var barItemArray=['activity_1.html','activity_2.html','activity_3.html'];
    var curBarItemWebview;
    mui.init();
    var header_tag;
    mui.plusReady(function() {
        header_tag=plus.storage.getItem('tag_text');
        //关闭等待框0
        plus.nativeUI.closeWaiting();
        //显示当前页面
        mui.currentWebview.show('slide-in-right',200);
        mainWebview = plus.webview.currentWebview();
        inittabitemWebviews();

        //
        $('.sel_list').on('tap','li a',function(e){
            console.log($(this).attr('target'));
            var b=$(this).attr('target');
            var cls_this=$(this).attr('class');
            var last_li=$('li:last-child a').text();
            curBarItemWebview.hide();
            barItemWebviewArray[b].show();
            curBarItemWebview=barItemWebviewArray[b];

            if(b==2){
               //类型
				if($('#mold').attr('class')=='hide'){
                    $('#mold').removeClass('hide').addClass('visible');
                    $('li:last-child a b').css({
                        'border-width':'0px 5px 7px 5px',
                        'border-color': '#fff #fff #333 #fff',
                   	})
                  }else{
                      $('#mold').removeClass('visible').addClass('hide');
                      $('li:last-child a b').css({
                          'border-width':'7px 5px 0px 5px',
                          'border-color': '#333 #fff #fff #fff',
                      });
                  }


                //页面传值===activity_3
                var page=plus.webview.getWebviewById('activity_3.html');
                mui.fire(page, 'activity', {
                    cls:'this'
                });
            }

            if(cls_this=='noactive'){
                $(this).parent().siblings().children().removeClass('active').addClass('noactive');
                $(this).removeClass('noactive').addClass('active');
                if($(this).text()!=last_li){
                    $('#mold').removeClass('visible').addClass('hide').removeClass('noactive');
                    $('li:last-child a').html('类型'+'<b></b>');
                    $('li:last-child a b').css({
                        'border-width':'7px 5px 0px 5px',
                        'border-color': '#333 #fff #fff #fff',
                    });
                }else{
                    $('#mold').removeClass('hide').addClass('visible');
                    $('li:last-child a b').css({
                        'border-width':'0px 5px 7px 5px',
                        'border-color': '#fff #fff #333 #fff',
                    });
                }
            }else{
                $('li:last-child a b').css({
                    'border-width':'0px 5px 7px 5px',
                    'border-color': '#fff #fff #333 #fff',
                });
            }
        })

    })

    function inittabitemWebviews(){
        for(var i=0;i<barItemArray.length;i++){
            barItemWebviewArray[i] = mui.preload({
                id:barItemArray[i],
                url:barItemArray[i],
                styles:{
                    top:'95px',
                    bottom: '0',
                    left: '0px',
                    bounce: 'vertical'
                },
                waiting:{
                    autoShow:true,//自动显示等待框，默认为true
                    title:'正在加载...'//等待对话框上显示的提示内容
                },
                extras:{
                    width:document.body.offsetWidth,
                    height:$('.mui-backdrop').height()
                }
            });
            barItemWebviewArray[i].hide();
            mainWebview.append(barItemWebviewArray[i]);
        }
        barItemWebviewArray[0].show();
        curBarItemWebview = barItemWebviewArray[0];
    }



    $(function(){
    	console.log('触发');
        window.addEventListener('tag',function(event){
        	var id=event.detail.idd;
            console.log(id);
            $('#tag').html(id+'<b></b>');
            console.log($('#tag').html());
            plus.nativeUI.closeWaiting();
            mui.currentWebview.show('slide-in-right', 200);
        })
    })
</script>
</body>
</html>
